<template>
  <div class="mouse">
    <div
      class="mouse-box"
      @mouseenter="showDra = true"
      @mouseleave="showDra = false"
      @mousemove="handleMouseMove"
    ></div>
    <div
      v-if="showDra"
      class="showDra"
      :style="{ left: draX + 'px', top: draY + 'px' }"
    >
      <span>111111111</span>
    </div>
  </div>
</template>

<script>
// 节流函数
function throttle(func, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      func.apply(this, args);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}
export default {
  data() {
    return {
      showDra: false, // 控制 showDra 元素的显示与隐藏
      draX: 0, // showDra 元素的水平位置
      draY: 0, // showDra 元素的垂直位置
    };
  },
  mounted() {
    // 对 handleMouseMove 方法进行节流处理
    this.handleMouseMove = throttle(this.handleMouseMove, 120); // 约 60 帧每秒
  },
  methods: {
    handleMouseMove(event) {
      if (this.showDra) {
        // 更新 showDra 元素的位置，使其跟随鼠标移动
        this.draX = event.clientX;
        this.draY = event.clientY;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 这里可以编写 SCSS 样式
.mouse {
  width: 100vw;
  height: 100vh;
  position: relative;
  &-box {
    cursor: pointer;
    width: 200px;
    height: 200px;
    background: #e1e1e1;
  }
  .showDra {
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgba(0, 0, 0, 0.3); // 为了方便查看，添加半透明背景
    z-index: 9;
  }
}
</style>
